import React from "react";
import { Form, Input, Button, Tabs } from "antd-mobile";
import { debounce } from "loadsh";
import http from "../../api/http";
// import {useNavigate} from "react-router-dom"
function Index() {
  // const navigate=useNavigate()

  const onFinish = debounce(async (value) => {
    const res = await http.post("/api/login", value);

    const { code, data } = res.data;
    console.log(data);

    if(code===200){
      localStorage.setItem("token",data.token)
      localStorage.setItem("userInfo",JSON.stringify(data.userInfo))
      // navigate("/Bpp")
      window.location.href="/"
      // 用户点击登录按钮，登录成功跳转首
    }
  });
  // 2.自定义一个函数组件
  return (
    <div>
      <Tabs>
        <Tabs.Tab title="账号登录" key="fruits">
          <Form
            layout="horizontal"
            onFinish={onFinish}
            footer={
              <Button block type="submit" color="primary" size="large">
                提交
              </Button>
            }
          >
            <Form.Header>水平布局表单</Form.Header>
            <Form.Item
              name="username"
              label="手机号"
              rules={[{ required: true, message: "手机号不能为空" }]}
            >
              <Input placeholder="请输入手机号" />
            </Form.Item>
            <Form.Item
              name="password"
              label="密码"
              rules={[{ required: true, message: "密码不能为空" }]}
            >
              <Input placeholder="请输入密码" />
            </Form.Item>
          </Form>
        </Tabs.Tab>
        <Tabs.Tab title="手机号登录" key="vegetables">
          西红柿
        </Tabs.Tab>
      </Tabs>
    </div>
  );
}

export default Index;
